<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link href="../bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../bootstrap-select-1.13.14/dist/css/bootstrap-select.css">
    <link rel="stylesheet" href="../toastr/toastr.min.css">
    <link rel="stylesheet" href="../bootstrapvalidator-aae9288/dist/css/bootstrapValidator.css">
    <title>入住房间</title>


</head>

<body>
        <div class="container-fluid" style="padding-left: 0px;padding-right: 0px">
        <!--价格的筛选-->
            <div class="form-inline" role="form" style="border: 1px solid #cccccc;padding: 5px;">
                <div class="form-group">
                    <input type="text" class="form-control" id="priceFrom"/>&nbsp;-
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="priceTo"/>
                </div>
                <div class="form-group">
                    <button class="btn btn-sm btn-default" id="search">检索</button>
                    <button class="btn btn-sm btn-default" id="searchClear">清空</button>
                </div>
            </div>

            <!--toolbar-添加和批量删除选项按钮-->

            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-info" id="toolbarAdd">添加房间</button>
                <button type="button" class="btn btn-danger" id="deleteMore">批量删除</button>
            </div>
            <!--删除的模态框-->
            <div class="modal fade" id="ModalForDelete" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                删除
                            </h4>
                        </div>
                        <div class="modal-body" id="TipForDelete">
                            确定要删除这些房间么?         </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">关闭            </button>
                            <button type="button" class="btn btn-primary" id="ComfirmForDelecte">
                                提交更改
                            </button>
                        </div>
                    </div><!-- /.modal-content --></div>
            </div>
            <!--退房模态框-->
            <div class="modal fade" id="ModalForCheckOutRoom" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabelForCheckOutRoom">
                                退房
                            </h4>
                        </div>
                        <div class="modal-body" id="TipForCheckOutRoom">
                            确定要退房么?         </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">关闭            </button>
                            <button type="button" class="btn btn-primary" id="ComfirmForCheckOutRoom">
                                提交更改
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!--办理入住的模态框-->
            <div class="modal fade" id="ModalForgotohome" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabelforgotohome">
                                办理入住
                            </h4>
                        </div>
                        <div class="modal-body" id="TipForgotohome">
                            <form id="gotohomeForm">
                                <div class="form-group">
                                    <label for="guest_name">姓名</label>
                                    <input type="text" class="form-control" id="guest_name" name="guest_name" placeholder="请输入姓名">
                                </div>
                                <div class="form-group">
                                    <label for="guest_idcard">身份证</label>
                                    <input type="text" class="form-control" id="guest_idcard" name="guest_idcard" placeholder="请输入身份证">
                                </div>
                                <div class="form-group">
                                    <label for="guest_phone">电话</label>
                                    <input type="text" class="form-control" id="guest_phone" name="guest_phone" placeholder="请输入电话">
                                </div>
                                <div class="text-right">
                                    <span id="returnMessage" class="glyphicon"> </span>
                                    <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
                                    <button id="ComfirmForgotohome" type="button" class="btn btn-primary">办理</button>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--添加和更新的模态框-->
            <div class="modal fade" id="ModalForAdd" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabelForAdd">
                                添加房间
                            </h4>
                        </div>
                        <div class="modal-body" id="TipForAdd">
                                <div class="form-group">
                                    <label for="room_id">房间号</label>
                                    <input type="text" class="form-control" id="room_id" placeholder="请输入房间号">
                                </div>
                                <div class="form-group">
                                    <label for="room_price">价格</label>
                                    <input type="text" class="form-control" id="room_price" placeholder="请输入价格">
                                </div>
                                <div class="form-group col-md-6">
                                    <label>房间类型</label>
                                    <select id ="room_type" class="selectpicker" data-live-search="true"  data-width="120px">
                                    </select>
                                </div>
                                <div class="form-group col-md-6" >
                                    <label>入住状态</label>
                                    <select id ="room_state"class="selectpicker" data-live-search="true"  data-width="120px">
                                        <option value="空闲">空闲</option>
                                    </select>
                                </div>

                        </div>
                        <div class="modal-footer" style="margin-top:50px">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">关闭            </button>
                            <button type="button" class="btn btn-primary" id="ConfirmForAdd">
                                提交
                            </button>
                        </div>
                    </div>
                 </div>
            </div>


    </div>
    <table id="data-table"></table>
    <script src="../jquery/jquery-3.5.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../bootstrap-select-1.13.14/dist/js/bootstrap-select.js"></script>
    <script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../toastr/toastr.min.js"></script>
    <script src="../jquery-validation/jquery.validate.js"></script>
    <script src="../jquery-validation/messages_zh.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/bootstrapValidator.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/language/zh_CN.js"></script>
    <script>

            //表格的显示
        var room_id;//全局变量
        var isupdate="";//全局变量区分add和update
        var room_ids = [];//做批量删除
        var guest_roomid;//做办理入住
        var checkout_room = [];//做退房处理
            var guest_paymoney;
        $(document).ready(function () {
            initTable();
            function initTable() {
                //可以翻页的
                var $table = $('#data-table');
                //查询参数
               // var queryParams = {id: 1};
                /**
                 * 初始化Table
                 */
                //先销毁表格
                $table.bootstrapTable('destroy');
                //初始化表格
                $table.bootstrapTable({
                    //表格参数
                    //请求地址,此处数据为本地加载
                    url: '/room/selectAllForFree',
                    //请求方式
                    method: "post",
                    //请求内容类型
                    contentType: "application/x-www-form-urlencoded",
                    //数据类型
                    dataType: "json",
                    //table高度：如果没有设置，表格自动根据记录条数觉得表格高度
                    height: '582',
                    //是否显示行间隔色
                    striped: true,
                    //是否启用排序
                    sortable: true,
                    //排序方式
                    sortOrder: "asc",
                    //是否使用缓存
                    cache: false,
                    //每行的唯一标识
                    uniqueId: "room_no",
                    //指定工具栏
                    toolbar: "#toolbarAdd,#deleteMore,#CheckOutRoom",
                    //显示刷新按钮
                    showRefresh: true,
                    //切换显示样式
                    showToggle: false,
                    //默认显示详细视图
                    cardView: false,
                    //是否显示搜索
                    search: true,
                    strictSearch: false,//精确查询
                    //是否显示分页
                    pagination: true,
                    //是否启用点击选中行
                    clickToSelect: true,
                    //最少要显示的列数
                    minimumCountColumns: 2,
                    //显示隐藏列
                    showColumns: false,
                    //cell没有值时显示
                    undefinedText: '-',
                    //分页方式：client客户端分页，server服务端分页
                    /*	              指定。注意，这两种后台传过来的json数据格式也不一样
                     client : 正常的json array格式 [{},{},{}]
                     server： {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数，后面的rows是指当前页面展示的数据量。*/
                    sidePagination: "client",
                    //每页的记录行数
                    pageSize: 8,
                    //初始化加载第1页，默认第1页
                    pageNumber: 1,
                    //可供选择的每页的行数
                    pageList: "[10, 20, 50, 80, 100]",
                    paginationFirstText: "首页",
                    paginationPreText: "上一页",
                    paginationNextText: "下一页",
                    paginationLastText: "末页",
                    //按钮样式
                    buttonsClass: 'btn',
                    //分页器class
                    iconSize: 'pager',
                    //查询条件
                    //得到查询的参数
                    queryParams: queryParams,
                    //列参数
                    //表头
                    columns: [
                        {
                            checkbox: true,
                            visible: true

                        },
                        // {
                        //     field: 'room_no',
                        //     title: '房间编号',
                        //     sortable: true,
                        //
                        // },
                        {
                            field: 'room_id',
                            title: '房间号',
                            sortable: true,

                        }, {
                            field: 'room_type',
                            title: '房型',
                            sortable: true,
                        }, {
                            field: 'room_price',
                            title: '价格',
                            sortable: true
                        } , {
                            field: 'room_state',
                            title: '状态',
                            sortable: true,
                        },
                        {
                            title: '操作',
                            align: 'center', // 居中显示
                            width: 200,
                            valign: 'middle',
                            events: operateEvents,
                            formatter: function (e,value, row, index) {
                                return "<button class='btn btn-info updateRoomfree'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> 编辑</button> " +
                                       "<button class='btn btn-danger deleteRoomfree'> <i class='fa fa-trash' aria-hidden='true'></i> 删除</button>" ;

                            }
                        },
                    ],
                    onLoadSuccess: function () {//加载成功时
                        $(".bs-checkbox").css({"text-align": 'center', "vertical-align": "middle"});//把复选框强制居中
                    }, onLoadError: function (statusCode) {
                        return "加载失败了"
                    }, formatLoadingMessage: function () {
                        //正在加载
                        return "拼命加载中...";
                    }, formatNoMatches: function () {
                        //没有匹配的结果
                        return '无符合条件的记录';
                    }

                });
            }

          //  select  option的显示
            $.ajax({
                url:'../room/selectAllRoomtype',
                dataType:'json',
                type:'post',
                async:true,
                success:function (data) {
                    var option= data.object;
                    $.each(option,function (i,n) {
                        $("#room_type").append("<option value='"+n+"'>"+n+"</option>");

                    });
                    $("#room_type").selectpicker('refresh');
                    $('#room_type').selectpicker('render');
                }
            });

            //添加模态框
            $("#toolbarAdd").click(function () {
                $("#myModalLabelForAdd").text("添加房间");
                isupdate="";
                $("#ModalForAdd").modal("show");

            });

            //删除模态框
            $("#ComfirmForDelecte").click(function () {

                $.ajax({
                    url: "../room/deleteRoomFree",
                    type: "get",
                    dataType: "json",
                    //序列化,能够传递数组给服务器
                    traditional: true,
                    data: {
                        room_ids:room_ids
                    },
                    success: function (rs) {
                        var errorCode = rs.errorCode;
                        if (errorCode==0){
                            //模态框成功后消失
                            $("#ModalForDelete").modal("hide");
                            //删除成功后刷新
                            initTable();
                            //刷新后出一个提示框
                            toastr.success(rs.status);
                        } else {
                            toastr.error(rs.status);
                            $("#ModalForDelete").modal("hide");

                        }

                    }
                })


            });

            // 获取表格所有已经勾选的行数据，为一个对象数组---做批量删除
            $("#deleteMore").click(function () {
                var selects = $('#data-table').bootstrapTable('getSelections');
                for (var i=0;i<selects.length;i++) {
                    room_ids[i]=selects[i].room_id;
                }
                $("#ModalForDelete").modal("show");

            });

            //添加和更新的提交
            $("#ConfirmForAdd").click(function () {
                if (isupdate!=""){
                    $.ajax({
                        type: "post",
                        url: "../room/updatetRoomForfree",
                        async: true,
                        dataType: "json",
                        data: {
                            room_id: $("#room_id").val(),
                            room_price: $("#room_price").val(),
                            room_type: $("#room_type").val(),
                            room_state: $("#room_state").val()

                        },
                        success: function (rs) {
                            var errorCode = rs.errorCode;
                            if (errorCode == 0) {
                                //模态框成功后消失
                                $("#ModalForAdd").modal("hide");
                                //成功后刷新
                                initTable();
                                //刷新后出一个提示框
                                toastr.success(rs.status);

                            } else {
                                toastr.error(rs.status);
                            }
                        }
                    })
                }else {
                    $.ajax({
                        type: "post",
                        url: "../room/insertRoomForfree",
                        async: true,
                        dataType: "json",
                        data: {
                            room_id: $("#room_id").val(),
                            room_price: $("#room_price").val(),
                            room_type: $("#room_type").val(),
                            room_state: $("#room_state").val()

                        },
                        success: function (rs) {
                            var errorCode = rs.errorCode;
                            if (errorCode == 0) {
                                //模态框成功后消失
                                $("#ModalForAdd").modal("hide");
                                //成功后刷新
                                initTable();
                                //刷新后出一个提示框
                                toastr.success(rs.status);

                            } else {
                                toastr.error(rs.status);
                            }
                        }
                    })
                }
            });

            //做办理入住模态框的输入验证
            var form = $('#gotohomeForm');
            form.bootstrapValidator({
                message: '输入值不合法',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    guest_name: {
                        message: '用户名不合法',
                        validators: {
                            notEmpty: {
                                message: '用户名不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 30,
                                message: '请输入2到30个字符'
                            }//,
                            // regexp: {
                            //     regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
                            //     message: '用户名只能由字母、数字、点、下划线和汉字组成 '
                            // }
                        }
                    }
                    , guest_idcard: {
                        validators: {
                            notEmpty: {
                                message: '身份证不能为空'
                            }
                        }
                    }, guest_phone: {
                        validators: {
                            notEmpty: {
                                message: '手机号不能为空'
                            },
                            regexp: {
                                regexp: "^([0-9]{11})?$",
                                message: '手机号码格式错误'
                            }
                        }
                    }
                }
            });






            // 办理入住的提交
            // $("#ComfirmForgotohome").click(function () {
            //     var bv=form.data("bootstrapValidator");
            //     bv.validate();
            //     if(bv.isValid()){
            //         console.log(form.serialize());
            //         $.ajax({
            //             url: "../guest/insertGuest",
            //             type: "get",
            //             async: false,
            //             dataType: "json",
            //             //序列化,能够传递数组给服务器
            //             traditional: true,
            //             data: {
            //                 guest_paymoney:guest_paymoney,
            //                 guest_roomid:guest_roomid,
            //                 guest_name:$("#guest_name").val(),
            //                 guest_idcard:$("#guest_idcard").val(),
            //                 guest_phone:$("#guest_phone").val()
            //             },
            //             success: function (rs) {
            //                 var errorCode = rs.errorCode;
            //                 if (errorCode==0){
            //                     //模态框成功后消失
            //                     $("#ModalForgotohome").modal("hide");
            //                     //删除成功后刷新
            //                     initTable();
            //                     //刷新后出一个提示框
            //                     toastr.success(rs.status);
            //
            //                 } else {
            //                     toastr.error(rs.status);
            //                     $("#ModalForgotohome").modal("hide");
            //
            //                 }
            //
            //             }
            //         })
            //     }
            //
            // });

            //
            // //退房模态框
            // $("#CheckOutRoom").click(function () {
            //     var selects = $('#data-table').bootstrapTable('getSelections');
            //     for (var i=0;i<selects.length;i++) {
            //         checkout_room[i]=selects[i].room_no;
            //     }
            //     $("#ModalForCheckOutRoom").modal("show");
            //     console.info("==========="+checkout_room[0])
            // });
            // //退房模态框
            // $("#ComfirmForCheckOutRoom").click(function () {
            //     $.ajax({
            //         url: "../room/checkoutroom",
            //         type: "get",
            //         dataType: "json",
            //         //序列化,能够传递数组给服务器
            //         traditional: true,
            //         data: {
            //             checkout_room: checkout_room,
            //         },
            //         success: function (rs) {
            //             var errorCode = rs.errorCode;
            //             console.info("errorCode=======" + errorCode);
            //             if (errorCode == 0) {
            //
            //                 $("#ModalForCheckOutRoom").modal("hide");
            //                 initTable();
            //                 toastr.success(rs.status);
            //             } else {
            //                 toastr.error(rs.status);
            //                 $("#ModalForCheckOutRoom").modal("hide");
            //
            //             }
            //         }
            //     })
            //  });

            //当模态框关闭时，清空模态框数据
            $('#ModalForAdd').on('hidden.bs.modal', function () {
                clearModelData();
            })
            //清空模态框数据
            function clearModelData() {
                $("#room_id").val("");
                $("#room_price").val("");
                $("#room_type").val("");
                $("#room_state").val("");
                $("#guest_phone").val("");
                $("#guest_name").val("");
                $("#guest_idcard").val("");

            }
            $('#ModalForgotohome').on('hidden.bs.modal', function () {
                clearModelData();
            })




        //做价格的区间
           function queryParams(params){
                var From=$("#priceFrom").val();
                var To=$("#priceTo").val();
                var data={
                    priceFrom:From,
                    priceTo:To

               };
                return data;
           }

            $("#search").click(function () {
                initTable();
            });

           $("#searchClear").click(function () {
               $("#priceFrom").val("");
               $("#priceTo").val("");
               initTable();
           });


        });



//jq完============================================================================================================


             window.operateEvents = {
                'click .updateRoomfree': function (e, value, row, index) {
                    $("#myModalLabelForAdd").text("编辑房间");
                    isupdate= row.room_id;//一加载的时候就判断room_id是否为空,不为空就是更新,空的就是添加
                    $("#ModalForAdd").modal("show");
                    $.ajax({
                        url: "../room/selectRoomByid",
                        type: "get",
                        dataType: "json",
                        data: {
                            room_id: row.room_id
                        },
                        success: function (res) {
                            if (res.errorCode==0) {
                                $("#room_id").val(res.object.room_id);
                                $("#room_type").val(res.object.room_type);
                                $("#room_price").val(res.object.room_price);
                                $("#room_state").val(res.object.room_state);

                            }

                        }

                    });
                },
                'click .deleteRoomfree': function (e, value, row, index) {
                    //一点击删除按钮就显示模态框
                    $("#TipForDelete").html("确定要删除"+row.room_id+"房间么?")
                    room_ids[0]=row.room_id;
                    $("#ModalForDelete").modal("show");
                }//,
                //  'click .doChectIn': function (e, value, row, index) {
                //      guest_roomid= row.room_no;
                //       guest_paymoney=row.room_price;
                //      $("#ModalForgotohome").modal("show");
                //  }

            };














        </script>

</body>
</html>